<template>
	<block>
		<hxt-layout id="hxt-layout" title="电影票房排行" svc="music" initTitle="电影票房排行加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #fff;">
				<van-search :value="msg" placeholder="请输入歌曲名搜索" use-action-slot @change="onChange">
					<view slot="action" @click="onSearch">搜索</view>
				</van-search>
				<view class="hxt-flex-fill" style="overflow: hidden;">
					<scroll-view scroll-y style="height:100%;" scroll-with-animation="true" enable-back-to-top="true"
						:enhanced="true" :bounces="false">
						<view v-for="(item,index) in list" :key="index">
							<van-cell :title="item.songname" :value="item.name" is-link @click="show(item.id)"></van-cell>
							<!-- <van-card :tag="index+1" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
								<view slot="title" style="font-size: 30rpx;font-weight: 700;">
									{{item.songname}}
								</view>
								<view slot="desc" style="visibility: hidden;">
									{{item.releaseInfo}}
								</view>
								<view slot="tags">
									{{item.name}}
								</view>
								<view slot="price" style="color: #ee0a24;font-size: 30rpx;font-weight: 700;">
									{{item.sumBoxDesc}}
								</view>
							</van-card> -->
						</view>
					</scroll-view>
				</view>
			</view>
		</hxt-layout>
		<page-container v-if="!!showDetail" :show="!!showDetail" @clickoverlay="closeSheet" @afterleave="closeSheet" >
			<view class="hxt-flex-column">
				<view class="cu-bar bg-white solid-bottom" style="background-color:#F9F9F9;">
					<view class="action">
						<text class="cuIcon-title text-orange "></text>学生成绩
					</view>
					<view class="action">
						<button class="cu-btn line-cyan round shadow sm" style="width:auto;"
							@click="closeSheet">关闭</button>
					</view>
				</view>
				<view class="hxt-flex-fill" style="overflow: hidden; position: relative;">
					<audio :poster="music.cover" :name="music.songname" :author="music.name" :src="music.src" id="myAudio" controls loop></audio>
				</view>
				<view @click="closeSheet" class="padding-sm"
					style="text-align: center; font-size: 28rpx; border-top:10rpx solid #F5F5F5;">
					<text>取消</text>
				</view>
			</view>
		</page-container>
		<hxt-loading id="hxt-loading"></hxt-loading>
	</block>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			return {
				list: [],
				msg: '稻香',
				showDetail:false,
				music:null,
				audioCtx:null,
			}
		},
		onReady: function (e) {
		    // 使用 wx.createAudioContext 获取 audio 上下文 context
		    this.audioCtx = wx.createAudioContext('myAudio')
		  },
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
			},
			onChange: function(e) {
				this.msg = e.detail;
			},
			onSearch: function(e) {
				var _this = this;
				if(!hxt.trim(_this.msg))return hxt.Notify({
						type: 'danger',
						message: '请输入搜索关键词'
					});
				hxt.post({
					url: 'http://ovoa.cc/api/wangyi.php?type=json&msg='+_this.msg,
					data: {
						msg: _this.msg,
						type: 'json'
					},
					ok: function(res) {
						if (res.statusCode != 200) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.errMsg + '，请稍后重试！'
							});
							return;
						};
						if(res.data.code!=200)return hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.msg + '，请稍后重试！'
							});
						_this.list = res.data.data;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			show:function(id){
				var _this=this;
				hxt.post({
					url: 'http://ovoa.cc/api/wangyi.php?type=json&msg='+_this.msg+'&n='+id,
					data: {},
					ok: function(res) {
						if (res.statusCode != 200) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.errMsg + '，请稍后重试！'
							});
							return;
						};
						if(res.data.code!=200)return hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.msg + '，请稍后重试！'
							});
						var data=res.data.data;
						// _this.music = res.data.data;
						// _this.showDetail=true;
						const backgroundAudioManager = wx.getBackgroundAudioManager()
						backgroundAudioManager.title = data.songname;
						backgroundAudioManager.epname = data.songname;
						backgroundAudioManager.singer = data.name;
						backgroundAudioManager.coverImgUrl = data.cover;
						// 设置了 src 之后会自动播放
						backgroundAudioManager.src = data.src;
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
					}
				});
			},
			closeSheet: function(e) {
				this.showDetail=false;
			},
		}
	}
</script>

<style>

</style>
